<template>
      <el-form :model="tollRoadForm" ref="tollRoadForm" :inline="true" label-width="72px" :label-position="'left'">
        <el-row class="search-title">条件检索</el-row>
            <el-form-item prop="road_name">
              <el-input prefix-icon="el-icon-search" v-model="tollRoadForm.road_name"
                        @clear="handleSelectRoad" clearable placeholder="道路名称"/>
            </el-form-item>
        <el-form-item>
            <el-button class="btn-search" @click="handleSelectRoad" type="primary">搜索</el-button>
        </el-form-item>
        <collapse-vertical>
          <el-row  v-show="item3Seem">
            <el-row>
              <el-form-item prop="area_name" label="所属辖区">
                <el-input v-model="tollRoadForm.area_name" @click.native="openArea" readonly type="text"
                          placeholder="所属辖区"/>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item prop="park_location" label="停车位置">
                <el-radio-group v-model="tollRoadForm.park_location">
                  <el-radio v-for="item in parkLocation" :label="item.id">{{item.value}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item prop="park_time" label="停车时段">
                <el-radio-group v-model="tollRoadForm.park_time">
                  <el-radio v-for="item in parkTime" :label="item.id">{{item.value}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                <el-form-item prop="is_fan" label="是否示范路">
                  <el-radio-group v-model="tollRoadForm.is_fan">
                    <el-radio v-for="item in isFan" :label="item.id">{{item.value}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" style="margin-left: 10px">
                <el-button size="mini"  class="btn-mini-form"@click="handleSelectRoad">提交</el-button>
                <el-button size="mini" class="btn-mini-form" @click="resetForm('tollRoadForm')">重置</el-button>
              </el-col>
            </el-row>
          </el-row>
        </collapse-vertical>
        <el-row style="text-align: center">
          <el-button style="border: none;background-color: transparent" size="small"
                     @click="item3Seem = !item3Seem;isDisplay=!isDisplay" :icon="isDisplay?iconUp:iconDown"></el-button>
        </el-row>
        <department :extraParam="extraParam"
                    :dialogDwVisible.sync="dwVisible"
                    :dwLoading.sync="dwLoading"
                    @setDepartment="dwName"></department>
      </el-form>


</template>

<script>
  import { selDictonary, selDictonaryValue } from '../../../api/dictionary'
  import { selectBaseroads } from '../../../api/parkingResource/tollRoad'
  import CollapseVertical from '../../../utils/collapseVertical'
  import Department from '../../common/sysorg/department'
  import ElFormItem from "element-ui/packages/form/src/form-item";

  export default {
    name: 'tollRoadForm',
    components: {
      ElFormItem,
      Department,
      CollapseVertical
    },
    props: [
      'pageNum',
      'pageSize'
    ],
    data() {
      return {
        extraParam: {
          lovtype: 'orgtype',
          level: null,
          orgtype: '1',
          p_org: null,
          getSelfOrg: null
        },
        dwVisible: false,
        dwLoading: true,
        iconUp: 'el-icon-arrow-up',
        iconDown: 'el-icon-arrow-down',
        isDisplay: false,
        item3Seem: false,
        tollRoadForm: {
          road_name: '',
          area_name: '',
          area_no: '',
          park_location: '',
          park_time: '',
          is_fan: ''
        },
        tollRoadQuery: {
          page: 1,
          limit: 10
        },
        parkLocation: [],
        parkTime: [],
        isFan: []
      }
    },
    created() {
      this.handleSelectRoad()
    },
    mounted() {
      selDictonary().then(content => {
        for (var i = 0; i < content.length; i++) {
          if (content[i].id === 'ori') {
            this.parkLocation = content[i].comboboxDetailList
          } else if (content[i].id === 'tcsd') {
            this.parkTime = content[i].comboboxDetailList
          } else if (content[i].id === 'roadkind') {
            this.isFan = content[i].comboboxDetailList
          } else {
            continue
          }
        }
      })
    },
    watch: {
      pageNum(val) {
        this.tollRoadQuery.page = val
        this.handleSelectRoad()
      },
      pageSize(val) {
        this.tollRoadQuery.limit = val
        this.handleSelectRoad()
      }
    },
    methods: {
      handleSelectRoad() {
        this.$emit('tollRoadLoading', true)
        selectBaseroads(this.tollRoadQuery, this.tollRoadForm).then(
          res => {
            selDictonaryValue(res).then(resp => {
              this.$emit('tollRoadList', resp)
              this.$emit('tollRoadLoading', false)
            })
          }
        )
      },
      resetForm(tollForm) {
        this.$refs[tollForm].resetFields()
        this.tollRoadForm.area_no = ''
        this.handleSelectRoad()
      },
      openArea() {
        this.dwVisible = true
      },
      dwName(val) {
        this.tollRoadForm.area_no = val.orgno
        this.tollRoadForm.area_name = val.orgname
      }
    }
  }
</script>

<style scoped>

</style>
